/*轮播图的样式设置*/
#slider {/*1-4行决定了div轮播图的居中位置,不会随着页面的变化，只会居中在页面中心*/
    position: absolute;
    left: 0px;
    right: 0px;
  margin: auto;
  padding: 0;
  top:70px;/**/
}

#slider{
    position: absolute;/*绝对定位; 要使z-index属性生效就必须和position属性一起使用才行*/
    border: 1px solid black;
    /**/
    
    width: 1280px;/*div的宽度*/
    height: 500px;/*div高度合适*/
    overflow: hidden;/*隐藏溢出的图片，并且会清除浮动，会使z-index属性失效的*/
    -webkit-user-select:none;/*以下四行都是防止复制图片的设置*/
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    background-color: brown;/**/
    
}
.slieder-item-container{/*对准在div=slider中的ul 标签进行设计样式，不然导致连上面导航的ul 也默认设置一样的样式的*/
    position: absolute;
    list-style-type: none;/*清除ul自带的符号*/
    width: 8000px;   /*修改了;一个ul=4*li的宽度的总和,但是要大于好像*/
     
}
.current{
    width: 1280px;/*1280px;*//*修改了每一个li的宽度都等于div窗口的宽度*/
    float:left;/*li的照片的方向浮动向左*/
}
.current a{
    display: inline-block;/*a标签的*/
}
.one{/*照片*/
    
    width: 100%;/*照片自适应填满div,或者是填满li*/
    height: 100%;/**/
    
}
#slider:hover .arrow-container{/*鼠标经过左右按钮位置div时显示出来*/
    display: block;
}
.arrow-container {/*左右按钮*/
    position: absolute;
    width: 100%;
    height: 50px;
    top: 50%;
    margin-top: -25px;
    display: none;
}

.arrow-container span {/*左右按钮*/
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 40px;
    /*display: inline-block;*/
    text-align: center;
    line-height: 50px;
    background: rgba(0, 0, 0, 0.2);
    color: white;
}
.left-arrow {/*左边按钮*/
    left: 0px;
    cursor: pointer;
}
.right-arrow {/*右边按钮*/
    right: 0px;
    cursor: pointer;
}

.indicator-container {/*圆点的样式设置*/
    position: absolute;
    width: 150px;
    height: 30px;
    line-height: 30px;
    bottom: 0;
    left: 50%;
    margin-left: -75px;
    text-align: center;
}

.indicator {/*未到圆点呈隐藏*/
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: white;
    cursor: pointer;
}

.indicator.active {/*第一个圆点呈红色*/
    background: red;
}